<div [@routerTransition]>
  <nz-spin [nzTip]="l('Registering')" [nzSize]="'large'" [nzSpinning]="saving">
    <nz-card [nzTitle]="nzTitle" nzHoverable='true'>
      <ng-template #nzTitle>
        <div class="text-center">
          <i class="anticon anticon-login"></i>
          <span>{{l('Register')}}</span>
        </div>
      </ng-template>
      <form nz-form #validateForm="ngForm" (ngSubmit)="save()">

        <br>

        <!-- 名 -->
        <nz-form-item>
          <nz-form-control nzHasFeedback>
            <nz-input-group nzPrefixIcon="anticon anticon-user">
              <input nz-input name="name" #name='ngModel' [(ngModel)]="model.name" [placeholder]="l('Name')" required>
            </nz-input-group>
            <nz-form-explain *ngIf="name.control.dirty&&name.control.errors">
              <ng-container *ngIf="name.control.hasError('required')">{{l('CanNotNull')}}</ng-container>
            </nz-form-explain>
          </nz-form-control>
        </nz-form-item>

        <!-- 姓 -->
        <nz-form-item>
          <nz-form-control nzHasFeedback>
            <nz-input-group nzPrefixIcon="anticon anticon-user">
              <input nz-input name="surname" #surname="ngModel" [(ngModel)]="model.surname" [placeholder]="l('Surname')" required>
            </nz-input-group>
            <nz-form-explain *ngIf="surname.control.dirty&&surname.control.errors">
              <ng-container *ngIf="surname.control.hasError('required')">{{l('CanNotNull')}}</ng-container>
            </nz-form-explain>
          </nz-form-control>
        </nz-form-item>


        <!-- 邮箱 -->
        <nz-form-item>
          <nz-form-control nzHasFeedback>
            <nz-input-group nzPrefixIcon="anticon anticon-mail">
              <input nz-input type="email" name="emailAddress" #emailAddress="ngModel" [(ngModel)]="model.emailAddress" [placeholder]="l('EmailAddress')"
                required email>
            </nz-input-group>
            <nz-form-explain *ngIf="emailAddress.control.dirty&&emailAddress.control.errors">
              <ng-container *ngIf="emailAddress.control.hasError('email')">{{l('NotEmail')}}</ng-container>
              <ng-container *ngIf="emailAddress.control.hasError('required')">{{l('CanNotNull')}}</ng-container>
            </nz-form-explain>
          </nz-form-control>
        </nz-form-item>


        <!-- 用户账号 -->
        <nz-form-item>
          <nz-form-control nzHasFeedback>
            <nz-input-group nzPrefixIcon="anticon anticon-user">
              <input nz-input name="userName" #userName="ngModel" [(ngModel)]="model.userName" [placeholder]="l('UserName')" required maxlength="32">
            </nz-input-group>
            <nz-form-explain *ngIf="userName.control.dirty&&userName.control.errors">
              <ng-container *ngIf="userName.control.hasError('required')">{{l('CanNotNull')}}</ng-container>
            </nz-form-explain>
          </nz-form-control>
        </nz-form-item>

        <!-- 密码 -->
        <nz-form-item>
          <nz-form-control nzHasFeedback>
            <nz-input-group nzPrefixIcon="anticon anticon-lock">
              <input nz-input type="password" name="password" #password="ngModel" [(ngModel)]="model.password" type="password" [placeholder]="l('Password')"
                required maxlength="32" minlength="6">
            </nz-input-group>
            <nz-form-explain *ngIf="password.control.dirty&&password.control.errors">
              <ng-container *ngIf="password.control.hasError('required')">{{l('CanNotNull')}}</ng-container>
              <ng-container *ngIf="password.control.hasError('minlength')">{{l('MinLength')}}</ng-container>
            </nz-form-explain>
          </nz-form-control>
        </nz-form-item>

        <!-- 功能按钮 -->
        <nz-form-item>
          <nz-col [nzSpan]="12">
            <button (click)="back()" type="button" nz-button [disabled]="saving">{{l("Back")}}</button>
          </nz-col>
          <nz-col [nzSpan]="12" class="text-right">
            <button nz-button nzType="primary" type="submit" [disabled]="!validateForm.valid||saving">{{l("Submit")}}</button>
          </nz-col>
        </nz-form-item>

      </form>

    </nz-card>
  </nz-spin>
</div>
